<template>
	<view>
		<u-navbar back-text="返回首页"></u-navbar>
		<view class="content">
			<!-- 正文内容 -->

			<view class="header">
				<view class="one">
					<view style=" width: 120rpx;height: 120rpx;float: left;margin-right: 17px;" @click="lingqu">
						<view class="hole" :data-content='contnetVar'></view>
					</view>
					<view class="title" style="	font-size: 36rpx;font-weight: bold;">
						{{list2.orderNo}}
						<view style="font-size: 26rpx;color: #999999;margin-top: 28rpx;">
							时限要求:{{list2.timeLimit}} <span style="float: right;"
								:style="{color:(list2.urgentDegree== 10 ? '#f06868' : list2.urgentDegree== 20 ?'#d5ba04' : '#4a9add')}">{{jinji}}</span>
						</view>
					</view>
				</view>

			</view>
			<view class="contents">
				<view class="vis" style="margin-bottom: 10px;    border-radius: 0 0 5px 5px;">
					<view>
						<span
							style="float: left;display: flex;align-items: center;text-justify: newspaper;    word-break: break-all;">
							客户名：{{list2.customName}}
						</span>
					</view>
					<view style="padding-top: 60rpx;">
						<view style="float: left;padding-top: 2px;text-justify: newspaper;    word-break: break-all;">
							出发地：{{list2.startAddress}} （{{list2.startTel}}）
						</view>
					</view>
					<view style="padding-top: 60rpx;">
						<view style="float: left;padding-top: 2px;text-justify: newspaper;    word-break: break-all;">
							目的地：{{list2.endAddress}}（{{list2.endTel}}）</view>
					</view>
					<view style="padding-top: 60rpx;">
						<view style="float: left;padding: 4px 0;text-justify: newspaper;    word-break: break-all;">
							备注：{{list2.remark==null ? '无' : list2.remark }}</view>
					</view>

					<view style="margin-top: 10rpx;text-align: left;word-wrap: break-word;display: inline-table">
						<view
							style="float: left;padding-top: 2px;width: 40vw;text-justify: newspaper;    word-break: break-all;">
							合同名/名称：{{list2.contractNo==null ? '无' : list2.contractNo}}</view>
						<view
							style="float: right;padding-top: 2px;width:40vw;text-justify: newspaper;    word-break: break-all;margin-left: 20rpx; ">
							运输类型：{{list2.transportType==null ? '无' : yunshuleixing}}</view>
					</view>
					<view style="margin-top: 0;text-align: left;word-wrap: break-word;display: inline-table">
						<view
							style="float: left;padding-top: 2px;width: 40vw;text-justify: newspaper;    word-break: break-all;">
							航班/运单号：{{list2.waybillNo==null ? '无' : list2.waybillNo}}</view>
						<view
							style="float: right;padding-top: 2px;width: 40vw;text-justify: newspaper; margin-left: 20rpx;   word-break: break-all;">
							业务类型：{{list2.businessType==null ? '无' : yewuleixing}}</view>
					</view>
				</view>
				<view v-if="list2.woOrderDetailList==null || list2.woOrderDetailList.length > 0">
					<view class="vis" style="margin-bottom: 10px;" v-for="(item,index) in list2.woOrderDetailList "
						:key="index">

						<!-- 	<view>
							<span style="float: left;display: flex;align-items: center; width: 100%;">
								单号/名称:{{item.detailName==null ? '无' : item.detailName}}
							</span>
						</view> -->
						<view
							style="padding-top: 0;text-align: left;word-wrap: break-word;    display: inline-table;">
							<view
								style="float: left;padding-top: 2px;width: 40vw;    text-justify: newspaper;    word-break: break-all; ">
								名称：{{item.detailName==null ? '无' : item.detailName}} </view>
							<view
								style="float: left;padding-top: 2px;width: 40vw;text-align: justify;    text-justify: newspaper;margin-left: 20rpx;word-break: break-all;">
								数量：{{item.detailNumber==null ? '无' : item.detailNumber}}</view>
						</view>

						<view
							style="padding-top: 0;text-align: left;word-wrap: break-word;    display: inline-table;">
							<view
								style="float: left;padding-top: 2px;width: 40vw;    text-justify: newspaper;    word-break: break-all; ">
								机号：{{item.airNo==null ? '无' : item.airNo}} </view>
							<view
								style="float: left;padding-top: 2px;width: 40vw;text-align: justify;    text-justify: newspaper;margin-left: 20rpx;word-break: break-all;">
								机位：{{item.seat==null ? '无' : item.seat}}</view>
						</view>
						<view
							style="padding-top: 0;text-align: left;word-wrap: break-word;    display: inline-table;">
							<view
								style="float: left;padding-top: 2px;width: 40vw;  text-justify: newspaper;    word-break: break-all; ">
								件号：{{item.detailNo==null ? '无' : item.detailNo}} </view>
							<view
								style="float: left;padding-top: 2px;width: 40vw;  text-justify: newspaper;    word-break: break-all;margin-left: 20rpx; ">
								序号：{{item.meteringNo==null ? '无' : item.meteringNo}}</view>
						</view>

						<!-- 	<view style="text-align: left;word-wrap: break-word;    display: initial;">
							<view style="float: left;margin-top:10rpx;width: 100%; text-justify: newspaper;    word-break: break-all; "
								class="nobreaks">
								数量：{{item.detailNumber==null ? 0 : item.detailNumber}}</view>
						</view> -->
					</view>
				</view>



			</view>
			<!-- 内容结束 -->
		</view>

	</view>
</template>
<script>
	import {
		Dist_Data_Type,
		OrderTurn,
		OneWoOrder,
	} from "@/pages/api/api"
	export default {
		data() {
			return {
				contnetVar: "领取",
				list: {},
				list2: {},
				jinji: "",
				yunshuleixing: "",
				yewuleixing: "",
			}
		},
		onLoad(option) {
			this.list = JSON.parse(option.obj)
			console.log(this.list)
			Dist_Data_Type("wo_urgent_degree").then(res => {
				res.data.map(v => {
					if (v.dictValue == this.list.urgentDegree) {
						this.jinji = v.dictLabel
						// console.log(v,this.list)
					}
				})
				// console.log("紧急程度", res)
			})
			Dist_Data_Type("wo_transport_type").then(res => {
				res.data.map(v => {
					if (v.dictValue == this.list.transportType) {
						this.yunshuleixing = v.dictLabel
					}
				})
				// console.log("运输类型", res)
			})
			Dist_Data_Type("wo_business_type").then(res => {
				res.data.map(v => {
					if (v.dictValue == this.list.businessType) {
						this.yewuleixing = v.dictLabel
					}
				})
				// console.log("业务类型", res)
			})
			this.pubilcs("", data => {
				console.log("单工单数据", data)
				this.list2 = data
			})
		},
		methods: {
			async pubilcs(e, callback) {
				await OneWoOrder(`${this.list.orderId}`).then(res => {
					if (res.code == 200) callback(res.data)
				})
			},

			lingqu() {
				OrderTurn({
					orderId: this.list.orderId,
					version: this.list.version,
					sendBy: uni.getStorageSync('userId'),
					sendByName: uni.getStorageSync('nickName'),
				}).then(res => {
					console.log("领取", res)
					if (res.code == 200) {
						uni.showToast({
							title: '领取成功',
							duration: 2000
						});
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					}

				})

			}
		}
	}
</script>
<style lang="scss" scoped>
	.header {
		width: 90%;
		margin: 10px auto 0;
		background: #fff;
		border-radius: 5px 5px 0 0;
		position: relative;
		left: 0;
		right: 0;


		.one {
			border-bottom: 1px solid #f9f2f2;
			padding: 17px 0;
			width: 94%;
			margin: 0 auto;
			left: 0;
			right: 0;

			.title {

				width: calc(100% - 50rpx);
				margin-left: 24px;
			}
		}
	}

	.grid-text {
		margin-top: 40rpx;
		color: #000;
	}

	.contents {
		overflow-y: scroll;
		margin: 0 auto 120rpx;
		// position: absolute;

		.vis {
			background: #fff;
			border-radius: 5px;
			padding: 10px;
			left: 0;
			right: 0;
			width: 90%;
			margin: 0 auto;
			color: #a2a2a2;
			display: table;
		}
	}



	.hole:after {
		position: absolute;
		height: 90rpx;
		width: 90rpx;
		text-align: center;
		line-height: 90rpx;
		content: attr(data-content);
		border-radius: 50%;
		border: 10px solid #4a9add;
		color: #4a9add;
		font-weight: bold;
		font-size: 40rpx;
		overflow: hidden;
	}

	.nobreaks {
		word-break: break-all;
		white-space: normal;
	}
</style>
